
import {
  edit_input,
  edit_switch,
  empty_formatter,
  switch_formatter,
} from '@/components/tables/cfg/table-render.jsx';
import {
  edit_select_type,
  edit_select_icon,
  edit_custom_switch,
  edit_visibleFunc_icon
} from '@/components/dialogs/src/button-group-widget/components/cfg/button-table-render.jsx'

export const useTableColumns = () => {
  return {
    getColumns: () => {
      return [
        {
          field: 'dragLot',
          title: '',
          width: 50,
          align: 'center',
          sortable: false,
          className: 'drag-cell',
          slots: { default: 'drag_lot' },
        },
        {
          field: 'value',
          title: '按钮数据值',
          width: 120,
          align: 'left',
          sortable: false,
          formatter: params => empty_formatter(params),
          slots: {
            default: params => {
              return edit_input(params);
            },
          },
        },
        {
          field: 'label',
          title: '按钮文字',
          width: 120,
          align: 'left',
          sortable: false,
          formatter: params => empty_formatter(params),
          slots: {
            default: params => {
              return edit_input(params);
            },
          },
        },
        {
          field: 'type',
          title: '按钮类型',
          width: 120,
          align: 'center',
          sortable: false,
          slots: { default: params => edit_select_type(params) },
        },
        {
          field: 'selectType',
          title: '按钮选中类型',
          width: 120,
          align: 'center',
          sortable: false,
          slots: { default: params => edit_select_type(params) },
        },
        {
          field: 'icon',
          title: '按钮icon',
          width: 300,
          align: 'center',
          sortable: false,
          slots: { default: params => edit_select_icon(params) },
        },
        {
          field: 'corner',
          title: '是否圆角',
          width: 100,
          align: 'center',
          sortable: false,
          formatter: params => switch_formatter(params),
          slots: { default: params => edit_switch(params) },
        },
        {
          field: 'visible',
          title: '是否隐藏',
          width: 100,
          align: 'center',
          sortable: false,
          formatter: params => switch_formatter(params),
          slots: { default: params => edit_switch(params) },
        },
        {
          field: 'disable',
          title: '是否禁用',
          width: 100,
          align: 'center',
          sortable: false,
          formatter: params => switch_formatter(params),
          slots: { default: params => edit_switch(params) },
        },
        {
          field: 'default',
          title: '是否默认选中',
          width: 100,
          align: 'center',
          sortable: false,
          formatter: params => switch_formatter(params),
          slots: { default: params => edit_custom_switch(params) },
        },
        {
          field: 'visibleFunc',
          title: '隐藏配置',
          width: 100,
          align: 'center',
          sortable: false,
          slots: { default: params => edit_visibleFunc_icon(params) },
        },
      ];
    },
  };
};

export const useRightTableColumns = () => {
  return {
    getColumns: () => {
      return [
        {
          field: 'dragLot',
          title: '',
          width: 50,
          align: 'center',
          sortable: false,
          className: 'drag-cell',
          slots: { default: 'drag_lot' },
        },
        {
          field: 'value',
          title: '按钮数据值',
          width: 120,
          align: 'left',
          sortable: false,
          formatter: params => empty_formatter(params),
          slots: {
            default: params => {
              return edit_input(params);
            },
          },
        },
        {
          field: 'label',
          title: '按钮文字',
          width: 120,
          align: 'left',
          sortable: false,
          formatter: params => empty_formatter(params),
          slots: {
            default: params => {
              return edit_input(params);
            },
          },
        },
        {
          field: 'type',
          title: '按钮类型',
          width: 120,
          align: 'center',
          sortable: false,
          slots: { default: params => edit_select_type(params) },
        },
        {
          field: 'icon',
          title: '按钮icon',
          width: 300,
          align: 'center',
          sortable: false,
          slots: { default: params => edit_select_icon(params) },
        },
        {
          field: 'corner',
          title: '是否圆角',
          width: 100,
          align: 'center',
          sortable: false,
          formatter: params => switch_formatter(params),
          slots: { default: params => edit_switch(params) },
        },
        {
          field: 'circle',
          title: '圆角按钮',
          width: 100,
          align: 'center',
          sortable: false,
          formatter: params => switch_formatter(params),
          slots: { default: params => edit_switch(params) },
        },
        {
          field: 'visible',
          title: '是否隐藏',
          width: 100,
          align: 'center',
          sortable: false,
          formatter: params => switch_formatter(params),
          slots: { default: params => edit_switch(params) },
        },
        {
          field: 'disable',
          title: '是否禁用',
          width: 100,
          align: 'center',
          sortable: false,
          formatter: params => switch_formatter(params),
          slots: { default: params => edit_switch(params) },
        },
      ];
    },
  };
};